<template>
  <view class="container w-100">
    <u-navbar
      bgColor="#1D1D20"
      title="任务区"
      placeholder
      autoBack
      fixed
      titleStyle="color:#fff"
      leftIconColor="#fff"
	  @rightClick="toConvert"
    >
		<view
			class="u-nav-slot color-w"
			slot="right"
		>
			兑换优惠券
		</view>
	</u-navbar>
    <!-- 广告积分 -->
    <view class="top-box w-100 color-w flex justify-center">
      <view class="flex flex-1">
        <view class="flex-1 text-center">
          <view class="font-50 font-b">{{ userInfo.balance || 0 }}</view>
          <view class="w-100 font-30 flex-1 m-t-10">可使用</view>
        </view>
        <view class="flex-1 text-center">
          <view class="font-50 font-b">{{ userInfo.freeze || 0 }}</view>
          <view class="w-100 font-30 flex-1 m-t-10">待到账</view>
        </view>
      </view>
      <!-- <view class="m-l-50">
        <view class="borderB" @tap="toDetail">广告明细</view>
        <view class="borderB m-t-10" @tap="toExchange">余额提现</view>
      </view> -->
    </view>
    <!-- 观看视频 -->
    <view class="w-100 m-t-20">
      <view
        class="w-100 bg-white signBox b-r-20 p-t-10 p-b-10 p-l-30 p-r-30 text-center"
      >
        <view class="flex justify-between m-b-10 w-100">
			<view class="font-32 font-b">今日已看({{ totalNum || 0 }}个)</view>
			<view class="borderB" @tap="toDetail">观看记录</view>
        </view>
        <scroll-view scroll-y lower-threshold="60" class="m-t-20">
          <view
            class="flex flex-col-center justify-between p-t-10 p-b-10 videoItem"
            v-for="(item, index) in videoList"
            :key="index"
          >
            <view class="flex font-30 font-b flex-col-center line-h-70">
              <view>{{ index + 1 }}、</view>
              <view class="maxTitle">立即观看广告</view>
            </view>
            <view
              class="rightBtn1 bg-yellow font-30 line-h-50 color-w"
              v-if="!item.isFinish"
              @click="viewVideo(index)"
              >去观看</view
            >
          </view>
          <empty text="暂无数据" :show="videoList.length == 0" />
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { customerInfo } from "@/common/api/customer.js";
import { lookVideoGetMoney, lookVideoTotal } from "@/common/api/xyc.js";
import {
  getListByDay,
  getTotal,
  taskProgress,
  getMonthTask,
  checkAdsAccount,
} from "@/common/api/advertising.js";
export default {
  mounted() {
	var that = this;
    window.loadAdResultCallback = function (e) {
      let eventType = e["eventType"];// 取到事件类型
      if (eventType == "onClose" && !that.finishedBool ) {
		that.$msg("奖励还未达成,退出无奖励");
      }
      if (eventType == "onReward") {
        that.finishedBool = true;
        that.videoReward();
      }
    };
  },
  data() {
    return {
      isAdvertisingState: false, //是否有获取广告积分的权益
      advertisingShow: null,
      showAll: true,
      dataList: [],
      nowDay: null,
      videoList: [1],
      hasSign: 0, //已签到多少天
      listTab: [
        {
          name: "未观看",
        },
        {
          name: "今日已观看",
        },
      ],
      totalNum: 0, // 视频总数
      current: 0, // 当前tab
      bgColor: "transparent",
      dataCountStart: [], //没有展开的数组
      pointCount: 0,
      pointAcountData: {}, //积分收益数据
      taskProgressInfo: {}, //视频数据
      dataListArr: [], //展示的数据

      userInfo: {},
      finishedBool: false,
    };
  },
  onShow() {
    this.getCustomerInfo();
    this.getTotal();
  },
  methods: {
	// 去兑换优惠券
	toConvert(){
      uni.navigateTo({
        url: "/pages/my/advertising/couponExchange",
      });
	},
    // 看完视频，获取到了奖励回调
    videoReward() {
      lookVideoGetMoney().then((res) => {
        if (res.code == 200) {
			this.getTotal();
        }
      });
    },
    // 查看观看视频总数
    getTotal() {
      lookVideoTotal().then((res) => {
        if (res.code == 200) {
          this.totalNum = res.extend.total;
        }
      });
    },
    // 获取用户信息
    getCustomerInfo() {
      customerInfo().then((res) => {
        this.userInfo = res.data.user || {};
        this.$store.commit("user/setUserInfo", res.data.user || {});
      });
    },
    // 调用激励视频
    viewVideo(index) {
      this.finishedBool = false;
      window.sdkManager.cjLoadAnShowRewardVideoAd(
        "05fdf0bacff2abc5",
        this.userInfo.id,
        ""
      );
    },
    toDetail() {
      uni.navigateTo({
        url: "/pages/my/advertising/detailRecord",
      });
    },
    toExchange() {
      uni.navigateTo({
        url: "/pages/my/advertising/pointExchange",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.top-box {
  background: #eca52b;
  height: 340rpx;
  padding: 100rpx 24rpx 23rpx 58rpx;
}
.borderB {
  height: 50rpx;
  line-height: 50rpx;
  min-width: 120rpx;
  text-align: center;
  color: #eca52b;
  border: 2rpx solid #eca52b;
  border-radius: 10rpx;
}

.h-500 {
  height: 640rpx;
}

.container {
  min-height: 100vh;
  background-color: #f5f6f8;
  position: relative;
  z-index: 11;
}

.boxContent {
  margin-top: -255rpx;
}

.barBox-r {
  border-radius: 40rpx;
}

.barBox {
  text-indent: 20rpx;
  background: linear-gradient(90deg, #e8604e, #f09156);
}

.p-2 {
  padding: 2rpx;
}

.sign-banner {
  width: 702rpx;
  height: 320rpx;
  position: relative;

  > image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .boxSign {
    position: absolute;
    bottom: 46rpx;
    right: 71rpx;
    line-height: 61rpx;
    width: 233rpx;
    height: 61rpx;
    background: linear-gradient(0deg, #ffffd4 0%, #fee478 91%);
    box-shadow: 5rpx 9rpx 29rpx 0px #edb88c,
      0px 5rpx 4rpx 0px rgba(255, 240, 236, 0.79);
    border-radius: 31rpx;
    font-size: 28rpx;
    color: #9e0010;
  }
}

.signBox {
  width: calc(100% - 48rpx);
  margin: 0 auto;
  padding: 28rpx 34rpx;
  box-sizing: border-box;

  //min-height: 300rpx;
  .signItem {
    width: 20.95%;
    margin-right: 34rpx;
    height: 160rpx;

    &:nth-child(4n) {
      margin-right: 0;
    }

    .icon {
      position: absolute;
      top: 54rpx;
      left: 45rpx;
      width: 55rpx;
      height: 55rpx;
    }
  }

  .month {
    height: 38rpx;
    line-height: 38rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.signContent {
  transition: all 1s ease;
}

.rightBtn1 {
  width: 150rpx;
  height: 50rpx;
  border-radius: 25rpx;
}

.rightBtn2 {
  width: 150rpx;
  height: 50rpx;
  background: #ffd2d2;
  border-radius: 25rpx;
}

.videoItem {
  // border-bottom: 2rpx solid rgba(204, 204, 204, 0.4);
}

.maxTitle {
  max-width: 380rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hasSign {
  background: rgba(234, 50, 50, 1);
}

.bg1 {
  background: rgba(234, 50, 50, 1);
}

.bg2 {
  background: rgba(245, 245, 245, 1);
}

.circle {
  width: 60rpx;
  height: 60rpx;
  line-height: 56rpx;
  border-radius: 60rpx;
  background: rgba(230, 230, 230, 1);
}

.money {
  bottom: 0rpx;
  left: 0;
}

.noTime {
  top: 0;
  left: 0;
}

.minWidth-150 {
  min-width: 180rpx;
}

.hasSign {
  background: #999999;
  color: #ffffff;
}

::v-deep .u-tabs__wrapper__nav__item {
  flex: 1;
}

.state-navbar {
  height: var(--status-bar-height);
  width: 100%;
}

.progress {
  width: 360rpx;
}

.advertising-cont {
  z-index: 111;
  padding: 435rpx 46rpx 0 46rpx;

  .progress {
    width: 464rpx;
  }

  .btn-box {
    width: 100%;
    margin-top: 54rpx;
    height: 78rpx;
    line-height: 78rpx;
    border-radius: 12rpx;
  }

  .count-box {
    width: 175rpx;
    padding: 4rpx 0;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    position: relative;

    &:before {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      border: 5px solid transparent;
      border-top-color: #ff0012;
      bottom: -10px;
      left: 15px;
    }
  }
  .upgrade-box-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
</style>
